<template>
  <div class="home">
    <!-- 搜索框 -->
    <div class="search">
  <search
    v-model="value"
    show-action
    placeholder="毛衣女 | 衬衫女"
    shape="round"
    class="searchOut"
    @search="onSearch"
    @focus="onFocus"
>

  <template #action>
    <router-link :to="'/sort'">
    <div class="search">
      <img src="../img/ALL.png" alt="">
      <p style="line-height:12px;color:#333333;font-size: 1rem;font-weight: bold;">分类</p> 
    </div>
    </router-link>
    <Button round  @click="onClickButton" size="normal">搜索</Button>
  </template>
</search>
</div>
<div class="xia" >
  <div class="swipe">
<!-- 轮播图 -->
<swipe :autoplay="3000" lazy-render indicator-color="#FFC731">
  <swipe-item v-for="image in images" :key="image" >
    <img :src="image" />
  </swipe-item>
</swipe>
</div>
  <div class="card">
    <div class="card-item">
      <div class="top">
         <h3>宝甄精选</h3>
         <p class="topdesc">这里有好东西</p>
      </div>
      <div  class="card-imag">
        <img src="../img/衣服.jpg" alt="">
      </div>
    </div>
    <div class="card-item">
      <div class="top">
         <h3>拍卖</h3>
         <p class="topdesc">1元起拍捡漏</p>
      </div>
      <div  class="card-imag">
        <img src="https://s1.328888.xyz/2022/10/07/fIN4I.png" alt="">
      </div>
    </div>
    <div class="card-item">
      <div class="top">
         <h3>同城</h3>
         <p class="topdesc">选闲置更靠谱</p>
      </div>
      <div class="card-imag">
        <img src="https://s1.328888.xyz/2022/10/07/fIlIj.png" alt="">
      </div>
    </div>
    <div class="card-item">
      <div class="top">
         <h3>我要租房</h3>
         <p class="topdesc">三分钟租到房</p>
      </div>
      <div class="card-imag">
        <img src="https://s1.328888.xyz/2022/10/07/fIO5m.png" alt="">
      </div>
    </div>
  </div>


   <div class="card1">
     <div class="left">
    <h3 style="margin: 6px;">手机回收</h3>
    <div class="foot">
      <img src="https://s1.328888.xyz/2022/10/07/fITAw.jpg" alt="" style="width:50px;height:50px">
       <div>
         <p>小米10</p>
         <p style="font-size:1.2rem"> <strong>￥1310</strong> </p>
         <p style="font-size:.1rem;color:#333333">限时加价13%</p>
       </div>
    </div>
     </div>
     <div class="right">
       <div class="top" >
          <div>
            <p>领券中心</p>
            <p>最高￥1499大礼包</p>
          </div>
          <img src="https://s1.328888.xyz/2022/10/07/fIS9K.png" alt="">
       </div>
       <div class="foot">
          <div class="left">
            <p>会员中心</p>
            <p>每月领6%加价券</p>
          </div>
          <img src="https://s1.328888.xyz/2022/10/07/fIHE7.png" alt="">
       </div>
     </div>
   </div>
 <!-- 跳转 -->
 <sticky :offset-top="54">
   <div class="switch" >
    <Button round  :color="first" @click="first='#ffc731';second='#f2f2f2';third='#f2f2f2'" :to="{name:'Like'}">猜你喜欢</Button>
    <Button round  :color="second" @click="first='#f2f2f2';second='#ffc731';third='#f2f2f2';" :to="{name:'Latest'}">最新发布</Button>
    <Button round  :color="third" @click="first='#f2f2f2';second='#f2f2f2';third='#ffc731';" :to="{name:'Reduction'}">一降到底</Button>
    </div>
</sticky>
   <router-view></router-view>

</div>
   <LoginBar v-show="isShowLogin"/>
  </div>
</template>
<script setup>
    import { Search,Button,Toast,Swipe, Card ,SwipeItem,Image,List,Sticky } from 'vant';
    import { ref, watch,onMounted } from "vue";
    import LoginBar from "../components/loginBar.vue";
    import { isLogined } from "../utils/tools";
    import { useRoute ,useRouter} from "vue-router";
    import { loadUserInfoAPI,shouCangAPI} from "../services/shop";
    const isShowLogin = ref(true);
    const route = useRoute();
    const router = useRouter();
    const images = [
      'https://s1.328888.xyz/2022/10/07/f2idR.jpg',
      'https://s1.328888.xyz/2022/10/07/fIEnX.jpg',
      'https://s1.328888.xyz/2022/10/07/f2vg6.jpg',
    ];
   const first=ref('#ffc731');
   const second=ref('#f2f2f2');
   const third=ref('#f2f2f2');
    const value = ref('');//搜索框中的值
    //组件挂载成功的时候执行
onMounted(()=>{
  if(isLogined()){
    console.log(isLogined());
        isShowLogin.value=false;
      }else{
        isShowLogin.value= true;
        console.log(isLogined());
      }
})
    /* 搜索框搜索事件 */
    const onSearch = (val) => {
      loadProductsAPI ().then((res)=>console.log(res));
      Toast(val);
    }
    // 获取焦点事件
    const onFocus=()=>{
      router.push({
        name: "Search",
      });
    }
    // 点击搜索
    const onClickButton = () => {
      Toast(value.value);
      value.value='';
      }
//     loadUserInfoAPI().then((res) => {
//       console.log(res);
// });
</script>
<style>
.van-search__content{
  border: 2px solid #FFC731;
}
  .home{
    display: flex;
    flex-direction: column;
  }
  .xia{
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  .swipe{
    width: 96vw;
    margin: 0 auto;
    height: 20vh;
    border-radius: 5rem;
  }
h3{
    text-align: center;
  }
img{
  display: block;
}
.card{
  width: 96vw;
  margin: 0 auto;
}
.search{
text-align: center;
font-size: 1.3rem;
}

 .van-search__action>.van-button{
  width: 65px;
  position: absolute;
  right: 65px;
  top: 10px;
  background-color: #FFC731;
  border: none;
  color: #333333 ;
}
.van-search__action{
  position: relative;
}
.card{
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.card1{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 10px;
  
}
.card1>div{
  height: 100px;
}
/* card样式 */
.card-item{
  border:2px solid #FFC731;
  width: 22%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border-radius: .6rem;
  overflow: hidden;
}
.card-item .top{
  background-color: #FFC731;
  width: 100%;
}
.card-imag{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-imag img{
  width: 4.2rem;
}
.card .topdesc{
  font-size: .1rem;
  text-align: center;
  color: #333333;
}
/* card1 样式*/
.card1>.left{
  padding: 0 10px;
  background-color: #e3eafd;
  width: 44vw;
  margin-right: 10px;
}
.card1>.left h3{
  text-align: left;
}
.card1>.left>.foot{
  display: flex;
  justify-content: space-around;
}
.card1>.right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card1>.right>div{
  background-color: #ffeaea;
  width: 200px;
  height: 150px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.card1>.right>div img{
  width: 10vw;
  transform: rotate(-45deg);
 
}
/* switch样式 */
.switch{
  margin-top: 20px;
  background-color: #fff;
  padding-bottom: 10px;
}
.switch>.van-button{
  color: #333333 !important
}
/* 商品列表 */
.list{
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.list>div{
  width: 46%;
}

.list img{
  width: 100%;
  border-radius: 10px;
}



</style>